<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="/admin/css/other/department.css"/>
    <style>
        .layui-table td:first-child {
            border-left-width: 1px;
            border-left-style: solid;
            border-left-color: #eee;
        }

        .layui-table td:nth-last-child(0) {
            /*border-right:2px solid #eee !important;*/
            border-right-width: 2px;
            border-right-style: solid;
            border-right-color: #eee;
        }

        .layui-table-page {
            border: none !important;
        }

        .layui-table-tool {
            border: none !important;
        }

        .layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
            border-width: 2px;
            border-style: solid;
            border-color: #eee;
        }
        .button-style{
            display: flex;
            align-items: center;
        }
    </style>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md1">
                <button type="button" class="pear-btn layui-btn-fluid  layui-btn-primary layui-border-black button-style">
                    <svg t="1658390457171" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2267" width="20" height="20"><path d="M995.6 907.8L797.8 718a207.6 207.6 0 0 1-345.2-151A207.6 207.6 0 1 1 821 694l197.6 189.8c16 15.4-7.4 39.2-23 24zM486 566.4a174.2 174.2 0 1 0 170.8-177.6 174 174 0 0 0-170.8 177.6zM0 814.6V127.8c0-22 33.4-22 33.4 0v686.8c0 22-33.4 22-33.4 0z m151.8-2v-120.2L118 727.2c-15.4 15.8-39.4-7.4-24-23.2l62.2-64.4a16.8 16.8 0 0 1 28.6 11.6v161.4c0.2 22-33 22-33 0z m217.4 13.8h-101.4a16.6 16.6 0 0 1-11.6-28.8l80.4-76.8c19.2-18.6 5-50.2-20.8-50.2a29.4 29.4 0 0 0-29.4 29.6c0 22-33.4 22-33.4 0a62.8 62.8 0 0 1 62.8-62.8c56 0 84.8 68.2 43.8 107.6l-50.4 48.2h59.8c22.2-0.2 22.2 33.2 0.2 33.2z m-67.4-239.2V127.8c0-22 33.4-22 33.4 0v459.4c0 22.2-33.4 22.2-33.4 0z m-150.2-3V127.8c0-22 33.4-22 33.4 0v456.6c0 22-33.4 22-33.4 0zM861.4 430V127.8c0-22 33.4-22 33.4 0v302.4c-0.2 22-33.6 22-33.6 0z m-419-27.2V127.8c0-22 33.4-22 33.4 0v275c0 22-33.4 22-33.4 0z m334-56.8V127.8c0-22 33.4-22 33.4 0V346c0 22-33.4 22-33.4 0z m-148.8-37.2V127.8c0-22 33.4-22 33.4 0v180.8c0 22.2-33.4 22.2-33.4 0z" fill="#2c2c2c" p-id="2268"></path></svg>
                    &nbsp;预览条码
                </button>
            </div>
            <div class="layui-col-md1">
                <button type="button" class="pear-btn layui-btn-fluid  layui-btn-primary layui-border-black">
                    <img src="/img/条码打印.png" alt="" style="height: 20px;">
                    打印条码
                </button>
                <!--                <button type="button" class="layui-btn layui-btn-fluid"></button>-->
            </div>
            <div class="layui-col-md1">
                <button type="button" class="pear-btn layui-btn-fluid  layui-btn-primary layui-border-black  button-style">
                    <svg t="1658391910671" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2638" width="20" height="20"><path d="M392.687614 869.933065l29.827329 0L422.514943 154.067958 392.687614 154.067958 392.687614 869.933065zM452.342272 869.933065l29.830399 0L482.172671 154.067958l-29.830399 0L452.342272 869.933065zM243.547899 869.933065l89.485057 0L333.032956 154.067958l-89.485057 0L243.547899 869.933065zM64.583924 869.933065l119.309316 0L183.89324 154.067958l-119.309316-0.002047L64.583924 869.933065zM512 869.933065l89.481987 0L601.481987 154.067958l-89.481987 0L512 869.933065zM840.102666 154.067958l0 715.865107L959.415053 869.933065 959.415053 154.067958 840.102666 154.067958zM750.621702 869.933065l59.654658 0L810.276361 154.067958l-59.654658 0L750.621702 869.933065zM631.309316 869.933065l59.654658 0L690.963974 154.067958l-59.654658 0L631.309316 869.933065z" p-id="2639" fill="#2c2c2c"></path></svg>
                    &nbsp;设计条码
                </button>
            </div>
        </div>
    </div>
</div>
<div class="layui-row layui-col-space15">
    <div class="layui-col-md2">
        <div class="layui-card">
            <div class="layui-card-body">
                <div id="organizationTreeContent" style="overflow: auto">
                    <ul id="organizationTree" class="dtree organizationTree" data-id="9527"></ul>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md10">
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="organization-table" lay-filter="organization-table"></table>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="organization-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </button>
</script>
<script type="text/html" id="organization-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i
            class="layui-icon layui-icon-edit"></i></button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i
            class="layui-icon layui-icon-delete"></i></button>
</script>
<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'dtree'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let dtree = layui.dtree;

        let MODULE_PATH = "operate/";


        let cols = [
            [
                // {type: 'checkbox'},
                {title: '名称', field: 'name', align: 'center', rowspan: 2},
                {title: '人数', field: 'userCount', align: 'center', rowspan: 2},
                {title: '负责人', field: 'leader', align: 'center', colspan: 3},
                {title: '操作', toolbar: '#organization-bar', align: 'center', width: 130, rowspan: 2}
            ],
            [
                // {title: '11', field: 'location', align: 'center'},
                {title: '22', field: '1', align: 'center'},
                {title: '33', field: '2', align: 'center'},
                {title: '44', field: '3', align: 'center'}
            ]
        ];
        var DTree = dtree.render({
            elem: "#organizationTree",
            //data: data,
            initLevel: "2", //默认展开层级为1
            line: true, // 有线树
            ficon: ["1", "-1"], // 设定一级图标样式。0表示方形加减图标，8表示小圆点图标
            icon: ["0", "2"], // 设定二级图标样式。0表示文件夹图标，5表示叶子图标
            method: 'get',
            url: "/admin/data/organizationtree.json"
        });

        table.render({
            elem: '#organization-table',
            url: '/admin/data/organization.json',
            height: 'full-150',
            page: true,
            cols: cols,
            // skin: 'line',
            toolbar: '#organization-toolbar',
            defaultToolbar: [{
                title: '刷新',
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter', 'print', 'exports'],
        });

        // 绑定节点点击事件
        dtree.on("node(organizationTree)", function (obj) {
            if (!obj.param.leaf) {
                var $div = obj.dom;
                DTree.clickSpread($div); //调用内置函数展开节点
            } else {
                layer.msg("叶子节点就不展开了,刷新右侧列表");
                table.reload("organization-table");
            }
        });

        table.on('tool(organization-table)', function (obj) {
            if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'edit') {
                window.edit(obj);
            }
        });

        table.on('toolbar(organization-table)', function (obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'refresh') {
                window.refresh();
            } else if (obj.event === 'batchRemove') {
                window.batchRemove(obj);
            }
        });

        form.on('submit(organization-query)', function (data) {
            table.reload('organization-table', {
                where: data.field
            })
            return false;
        });

        window.add = function () {
            layer.open({
                type: 2,
                title: '新增',
                shade: 0.1,
                area: ['500px', '400px'],
                content: MODULE_PATH + 'add.html'
            });
        }

        window.edit = function (obj) {
            layer.open({
                type: 2,
                title: '修改',
                shade: 0.1,
                area: ['500px', '400px'],
                content: MODULE_PATH + 'edit.html'
            });
        }

        window.remove = function (obj) {
            layer.confirm('确定要删除该用户', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: MODULE_PATH + "remove/" + obj.data['organizationId'],
                    dataType: 'json',
                    type: 'delete',
                    success: function (result) {
                        layer.close(loading);
                        if (result.success) {
                            layer.msg(result.msg, {
                                icon: 1,
                                time: 1000
                            }, function () {
                                obj.del();
                            });
                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                })
            });
        }

        window.batchRemove = function (obj) {
            let data = table.checkStatus(obj.config.id).data;
            if (data.length === 0) {
                layer.msg("未选中数据", {
                    icon: 3,
                    time: 1000
                });
                return false;
            }
            let ids = "";
            for (let i = 0; i < data.length; i++) {
                ids += data[i].organizationId + ",";
            }
            ids = ids.substr(0, ids.length - 1);
            layer.confirm('确定要删除这些用户', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: MODULE_PATH + "batchRemove/" + ids,
                    dataType: 'json',
                    type: 'delete',
                    success: function (result) {
                        layer.close(loading);
                        if (result.success) {
                            layer.msg(result.msg, {
                                icon: 1,
                                time: 1000
                            }, function () {
                                table.reload('organization-table');
                            });
                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                })
            });
        }

        window.refresh = function (param) {
            table.reload('organization-table');
        }
    })
</script>
</body>
</html>
